<template>
  <div class="all">
    <div class="choose">
      <el-button round v-for="item in classtype">{{ item.ctype }}</el-button>
    </div>
    <div class="sift">
      <div class="left">
        <el-button style="margin:0px 10px 15px 20px">
          <el-icon style="margin-right: 5px">
            <Guide/>
          </el-icon>
          新手指引
        </el-button>
      </div>
      <div class="right">
        <el-input
            v-model="keyword"
            placeholder="请输入课程名进行搜索"
            @keyup.enter.native="search"
        >
        </el-input>
      </div>
    </div>
    <div class="displayclass" style="margin-top: 100px">
      <el-row>
        <el-col
            :span="4"
            style="margin:0px 10px 15px 20px"
            v-for="item in classTitle"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                src="https://ali-cdn.educoder.net/images/avatars/Subject/1792?t=1616592220"
                class="image"
            />
            <div style="padding: 14px">
              <span>{{ item.name }}</span>
              <div class="bottom">
                <p style="font-size: small;color: #99a9bf">
                  <el-icon style="margin-right: 5px">
                    <UserFilled/>
                  </el-icon>
                  45人
                </p>
                <el-button round @click="enterClass(item.id)">进入课程</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {Guide, Search, UserFilled} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'

import axios from "axios";

import {CourseStore} from "@/store";

const course_store = CourseStore()
const router = useRouter()
const enterClass = (val: string) => {
  course_store.course_id = val
  router.push("/chapter")
}
const checked = ref(false)

const onChange = (status: boolean) => {
  checked.value = status
}

//课程
const myimg = [
  {url: require("@/assets/img/9.png")},
]

const classTitle = ref([])
const load = () => {
  axios.get('/course/all')
      .then(function (res) {
        console.log(res.data.data)
        classTitle.value = res.data.data
      })
}
onMounted(() => {
  load()
})
const keyword = ref('')
const search = () =>{
  axios.post('/course/search?name='+keyword.value)
      .then(function(res){
        classTitle.value = res.data.data
      })
}

const classtype = [
  {ctype: '全部'},
  {ctype: '程序设计语言'},
  {ctype: '算法设计'},
  {ctype: '计算机基础'},
  {ctype: '计算机系统能力'},
  {ctype: '云计算与大数据'},
  {ctype: '人工智能'},
  {ctype: '电子信息'},
  {ctype: 'Web开发'},
  {ctype: '软件工程'},
  {ctype: '网络安全'},
  {ctype: '物联网'},
]


</script>

<style scoped>
.all {
  overflow-x: hidden;
  background-color: rgba(240, 242, 245, 1);;
}

.sift {
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  width: 100%;
  margin-bottom: -40px;
}

.left {
  margin-left: 20px;
}

.right {
  margin-right: 40px;
}

.sift .right .input-with-select {
  height: 30px;
  width: 450px;
  border-radius: 30px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.choose {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
  height: 100px;
  padding: 0 30px 0;
  margin-bottom: 30px;
  position: relative;
  line-height: 3;
}

.all .choose .el-button.is-round {
  margin-right: 20px;
}

.displayclass {
  margin-left: 30px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
